<script lang="ts" setup>
import loading from '../../components/loading/loading.vue'
import {ElMessage} from "element-plus";

import {register} from "@/api/api";

const router = useRouter();
const route = useRoute();
const upDataUrl = import.meta.env.VITE_API_URL + '/util/file/oss/single';
const form = reactive({
  nextIndex: 1,
  userData: {
    responsibleSubject: '',
    userRole: '',
    userImg: '',
    teachingYears: '',
    passportCardFront: '',
    passportCardReverse: '',
    academicCertificate: ''
  },
  // formBottomText: '登录',
  storage: false,
  loading: false
});
onMounted(() => {
  if (Object.keys(route.query).length > 0) {
    form.userData = {
      ...form.userData,
      ...route.query
    }
  }
})
const formText = () => {
  if (form.userData.passportCardFront === '' || form.userData.passportCardReverse === '') {
    ElMessage.error('请上传护照或者身份证正反面')
    return false
  }
  if (form.userData.responsibleSubject === '') {
    ElMessage.error('请输入所教课程')
    return false
  }
  if (form.userData.userRole === '') {
    ElMessage.error('请选择角色')
    return false
  }
  if (form.userData.teachingYears === '') {
    ElMessage.error('请输入教学年限')
    return false
  }
  if (form.userData.academicCertificate === '') {
    ElMessage.error('请上传教师资格证')
    return false
  }
  return true
}
const next = () => {
  if (form.nextIndex <= 2) {
    form.nextIndex += 1;
  } else {
    if (formText()) {
      form.loading = true
      console.log(form.userData)
      delete form.userData.autPassword
      register(form.userData).then((res: any) => {
        form.loading = false
        if (res.code === 200) {
          ElMessage.success('注册成功')
          router.push({
            path: '/login',
            query: {}
          })
        } else {
          ElMessage.error('注册异常')
        }
      }).catch((err: any) => {
        form.loading = false
        router.push({
          path: '/login',
          query: {}
        })
      })
    }
    // router.push({
    //   path: '/home'
    // });
  }
};
const dack = (go: boolean = false) => {
  form.nextIndex -= 1;
  if (form.nextIndex === 0) {
    router.push({
      path: '/login',
      query: {...form.userData}
    });
  }
};
const upDataSuccess = (response: any, index: any) => {
  if (response.code === 200) {
    if (index === 1) {
      form.userData.passportCardFront = response.msg
    }
    if (index === 2) {
      form.userData.passportCardReverse = response.msg
    }
    if (index === 3) {
      form.userData.academicCertificate = response.msg
    }
    if (index === 4) {
      form.userData.userImg = response.msg
    }
  }
}
</script>

<template>
  <div class="loginBackdrop">
    <div class="panel">
      <loading v-if="form.loading"/>
      <div class="dack" @click="dack">返回上一步</div>
      <div class="panel-box">
        <div class="panel-title" v-if="form.nextIndex === 1">上传护照或者身份证正反面</div>
        <div class="panel-title" v-if="form.nextIndex === 2">上传最高学历证书</div>
        <div class="panel-title" v-if="form.nextIndex === 3">填写信息</div>
        <div class="panel-upData" v-if="form.nextIndex === 1">
          <div class="upData-item">
            <el-upload class="upload-demo" drag multiple :show-file-list="false"
                       :action="upDataUrl"
                       @success="upDataSuccess($event,1)"
            />
            <img v-if="form.userData.passportCardFront === ''" class="upData-item-icon" src="@/assets/icon/xj.png"
                 alt=""/>
            <img v-else class="upData-item-img" :src="form.userData.passportCardFront" alt=""/>
          </div>
          <div v-if="form.nextIndex === 1" class="upData-item">
            <el-upload class="upload-demo" drag multiple :show-file-list="false"
                       :action="upDataUrl"
                       @success="upDataSuccess($event,2)"
            />
            <img v-if="form.userData.passportCardReverse === ''" class="upData-item-icon" src="@/assets/icon/xj.png"
                 alt=""/>
            <img v-else class="upData-item-img" :src="form.userData.passportCardReverse" alt=""/>
          </div>
        </div>
        <div class="panel-upData" v-if="form.nextIndex === 2">
          <div class="upData-item">
            <el-upload class="upload-demo" drag multiple :show-file-list="false"
                       :action="upDataUrl"
                       @success="upDataSuccess($event,3)"
            />
            <img v-if="form.userData.academicCertificate === ''" class="upData-item-icon" src="@/assets/icon/xj.png"
                 alt=""/>
            <img v-else class="upData-item-img" :src="form.userData.academicCertificate" alt=""/>
          </div>
        </div>
        <div class="panel-form" v-if="form.nextIndex === 3">
          <el-form :model="form" label-width="100px" label-position="right">
            <el-form-item label="所教科目">
              <el-input v-model="form.userData.responsibleSubject" placeholder="请输入所教科目"/>
            </el-form-item>
            <el-form-item label="选择角色">
              <el-select v-model="form.userData.userRole" placeholder="请选择角色">
                <el-option label="助教" :value="1"/>
              </el-select>
            </el-form-item>
            <el-form-item label="教学年限">
              <el-input v-model="form.userData.teachingYears" placeholder="请输入教学年限"/>
            </el-form-item>
            <el-form-item label="上传本人头像">
              <el-upload
                  v-if="form.userData.userImg === ''"
                  class="avatar-uploader"
                  drag multiple
                  :action="upDataUrl"
                  :show-file-list="false"
                  @success="upDataSuccess($event,4)"
              >
                <el-icon class="avatar-uploader-icon">
                  <Plus/>
                </el-icon>
              </el-upload>
              <img v-else style="width: 80px;height: 80px" :src="form.userData.userImg" alt="">
            </el-form-item>
          </el-form>
        </div>
        <div style="display: flex; justify-content: center">
          <div class="loginData-bottom" @click="next">{{ form.nextIndex === 3 ? '提交' : '下一步' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep .el-form-item {
  align-items: center;
  font-size: 40px !important;
}

::v-deep .el-select {
  width: 100%;
}

::v-deep .el-input__wrapper {
  box-shadow: unset !important;
  background: #f5f5f5;
  height: 45px !important;
  font-size: 16px !important;
  border-radius: 10px !important;
}

::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #189b9e !important;
  font-size: 20px !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #189b9e !important;
  border-color: #189b9e !important;
  font-size: 20px !important;
}

::v-deep .el-upload {
  height: 100% !important;;
}

::v-deep .el-upload-dragger {
  height: 100% !important;
  background-color: rgba(255, 255, 255, 0);
}

.upload-demo {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);

}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  text-align: center;
  background-color: #f4f4f4;
  border-radius: 10px;
}

.loginBackdrop {
  background: url('@/assets/img/loginBackdrop.jpg') 100%/100% no-repeat;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;

  .panel {
    width: 900px;
    //height: 50%;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 0 10px 0 #f7cdcb;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;

    .dack {
      position: absolute;
      right: 20px;
      top: 20px;
      color: #a02831;
      cursor: pointer;
    }

    .panel-box {
      margin: 0 auto;
      height: 100%;

      .panel-form {
        width: 50%;
        margin: 40px auto;
      }

      .panel-title {
        //padding: 10px;
        text-align: center;
        font-size: 22px;
      }

      .panel-upData {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        //height: 80%;
        margin: 40px 0;

        .upData-item {
          position: relative;
          width: 38%;
          height: 180px;
          background-color: #f4f4f4;
          border-radius: 20px;
          border: 5px dashed #e8e8e8;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;

          .upData-item-img {
            width: 100%;
          }

          .upData-item-icon {
            width: 80px;
            height: 80px;
          }
        }
      }

      .loginData-bottom {
        width: 50%;
        box-sizing: border-box;
        padding: 15px;
        background-color: #a02831;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        color: white;
        cursor: pointer;
      }
    }
  }
}
</style>
